<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>生日祝福 - 小西岭</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);
            overflow: hidden;
            font-family: 'Microsoft YaHei', sans-serif;
            position: relative;
        }

        /* 生日标题 */
        .birthday-title {
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            text-shadow: 2px 2px 0 #ff4757;
            font-size: 2.8em;
            animation: float 2s ease-in-out infinite;
        }

        /* 蛋糕容器 */
        .cake-container {
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 180px;
        }

        /* 蛋糕层次 */
        .cake-layer {
            background: #fff5e6;
            border-radius: 10px;
            position: absolute;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .layer-bottom {
            width: 100%;
            height: 80px;
            bottom: 0;
            background: #ffdab9;
        }
        .layer-middle {
            width: 80%;
            height: 60px;
            bottom: 70px;
            left: 10%;
            background: #ffcba4;
        }
        .layer-top {
            width: 60%;
            height: 40px;
            bottom: 120px;
            left: 20%;
            background: #ffb488;
        }

        /* 蜡烛 */
        .candle {
            position: absolute;
            width: 10px;
            height: 45px;
            background: #fff;
            bottom: 130px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 3px;
        }
        .candle::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            background: #ffd700;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            top: -18px;
            left: -4px;
            animation: flame 1s ease-in-out infinite;
        }

        /* 祝福语区域 */
        .message-box {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 600px;
            background: rgba(255,255,255,0.95);
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            text-align: center;
        }
        .message-heading {
            color: #ff6b6b;
            font-size: 1.8em;
            margin-bottom: 15px;
            letter-spacing: 2px;
        }
        .message-text {
            color: #666;
            font-size: 1.1em;
            line-height: 1.8;
            margin: 10px 0;
        }
        .signature {
            color: #ff6b6b;
            font-size: 1.2em;
            margin-top: 20px;
            font-weight: bold;
        }

        /* 爱心动画 */
        .heart {
            position: absolute;
            color: #ff3b3b;
            font-size: 24px;
            animation: fall 8s linear forwards;
            opacity: 0.9;
            user-select: none;
            pointer-events: none;
        }
        /* 特殊样式 */
        .emoji {
            display: inline-block;
            margin-right: 8px;
            font-size: 1.2em;
        }

        @keyframes float {
            0%, 100% { transform: translate(-50%, -5px); }
            50% { transform: translate(-50%, 5px); }
        }

        @keyframes flame {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1) translateY(-3px); }
        }

        @keyframes fall {
            from { 
                transform: translateY(-10vh) rotate(0deg);
                opacity: 1;
            }
            to { 
                transform: translateY(110vh) rotate(360deg);
                opacity: 0;
            }
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .birthday-title { font-size: 2em; }
            .cake-container { width: 140px; height: 140px; }
            .message-box { width: 90%; padding: 15px; }
            .message-heading { font-size: 1.5em; }
            .message-text { font-size: 1em; }
        }
    </style>
</head>
<body>
    <div class="birthday-title">🎂 生日快乐！</div>

    <div class="cake-container">
        <div class="cake-layer layer-bottom"></div>
        <div class="cake-layer layer-middle"></div>
        <div class="cake-layer layer-top"></div>
        <div class="candle"></div>
    </div>
    <audio autoplay loop style="display: none;">
        <source src="music.mp3" type="audio/mp3">
        您的浏览器不支持音频播放。
    </audio>
    <div class="message-box">
        <h2 class="message-heading">亲爱的奋斗者</h2>
        <p><span class="emoji">🎉</span>在这个特别的日子里，愿所有美好如期而至！</p>
        <p><span class="emoji">🎂</span>愿你的每一天都充满阳光与欢笑</p>
        <p><span class="emoji">🎁</span>愿所有愿望都能实现</p>
        <p><span class="emoji">✨</span>愿你永远保持灿烂的笑容</p>
        <p class="signature">❤ 来自「小西岭」 ❤</p>
    </div>

    <!-- 自动生成爱心 -->
    <script>
        function createHeart() {
            const heart = document.createElement('div');
            heart.className = 'heart';
            heart.style.left = Math.random() * 100 + '%';
            heart.style.animationDuration = Math.random() * 3 + 5 + 's';
            heart.innerHTML = '❤';
            document.body.appendChild(heart);
            setTimeout(() => heart.remove(), 8000);
        }

        // 持续生成爱心
        setInterval(() => {
            if(Math.random() > 0.6) createHeart();
        }, 500);

        // 点击生成爱心
        document.addEventListener('click', (e) => {
            for(let i=0; i<1; i++) {
                setTimeout(() => {
                    const heart = document.createElement('div');
                    heart.className = 'heart';
                    heart.style.left = e.clientX + 'px';
                    heart.style.top = e.clientY + 'px';
                    heart.innerHTML = '❤';
                    document.body.appendChild(heart);
                }, i*50);
            }
        });
        const audio = new Audio('music.mp3');
    audio.loop = true;
    audio.autoplay = true;

    // 尝试自动播放
    audio.play().catch(() => {
        // 自动播放失败，等待用户点击再播放
        document.addEventListener('click', () => {
            audio.play().catch(() => {});
        });
    });
    </script>
</body>
</html>